﻿<div class="overlay" id="sys-overlay"></div>
<!--从这里开始替换 Html 此处必须加Id-->
<div class="spinner" id="sys-loading">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
</div>

<style>
    .overlay {
        z-index: 9998;
        position: fixed;
        background-color: #eee;
        opacity: 0.8;
        width: 100%;
        height: 100%;
    }
    /*从这里开始替换 Css 并需要修改样式：
        z-index: 9999;
        position: absolute;
        transform: translate(-20px,-20px);
        top: 50%;
        left: 50%;
    */
    .spinner {
        z-index: 9999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-20px,-20px);
        width: 40px;
        height: 40px;
    }

    .double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50% !important;
        background-color: #0ff;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
        animation: sk-bounce 2.0s infinite ease-in-out;
    }

    .double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    @-webkit-keyframes sk-bounce {
        0%, 100% {
            -webkit-transform: scale(0.0);
        }

        50% {
            -webkit-transform: scale(1.0);
        }
    }

    @keyframes sk-bounce {
        0%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }

        50% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }
</style>